[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { ShoppingBag } from "lucide-react" import { Button } from "@/components/ui/button" import { FeaturedProducts } from "@/components/featured-products" import { HeroSection } from "@/components/hero-section" import { CategorySection } from "@/components/category-section" export default function Home() { return (

Ready to upgrade your style?

Discover our latest collections and find your perfect fit.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { CartProvider } from "@/components/cart-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "StyleHub | Premium Clothing Brand", description: "Discover the latest fashion trends with our premium clothing collection", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" import { Menu, Search, ShoppingCart, User, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { useCart } from "@/components/cart-provider" export function Header() { const [isSearchOpen, setIsSearchOpen] = useState(false) const { cartItems } = useCart() const cartItemCount = cartItems.length return (

StyleHub

{isSearchOpen ? (

) : ( )}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Instagram, Twitter } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export function HeroSection() { return (

New Season Collection

Discover our latest styles crafted with premium materials for exceptional comfort and timeless elegance.

) } [V0_FILE]typescriptreact:file="components/category-section.tsx" isMerged="true" import Link from "next/link" import { Card, CardContent } from "@/components/ui/card" export function CategorySection() { const categories = [ { name: "Men's Collection", image: "/placeholder.svg?height=600&width=400", href: "/products/men", }, { name: "Women's Collection", image: "/placeholder.svg?height=600&width=400", href: "/products/women", }, { name: "Accessories", image: "/placeholder.svg?height=600&width=400", href: "/products/accessories", }, ] return (

Shop by Category

Browse our collections and find your perfect style

{categories.map((category) => (

{category.name}

))}

) } [V0_FILE]typescriptreact:file="components/featured-products.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ShoppingCart } from "lucide-react" import { useCart } from "@/components/cart-provider" const products = [ { id: 1, name: "Classic White T-Shirt", price: 29.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: true, }, { id: 2, name: "Slim Fit Jeans", price: 59.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: false, }, { id: 3, name: "Summer Floral Dress", price: 79.99, image: "/placeholder.svg?height=400&width=300", category: "women", isNew: true, }, { id: 4, name: "Casual Hoodie", price: 49.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: false, }, ] export function FeaturedProducts() { return (

Featured Products

Our most popular items, handpicked for you

{products.map((product) => ( ))}

) } function ProductCard({ product }) { const { addToCart } = useCart() return (

{product.isNew && New}

{product.name}

${product.price.toFixed(2)}

) } [V0_FILE]typescriptreact:file="components/cart-provider.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" type Product = { id: number name: string price: number image: string category: string isNew: boolean quantity?: number } type CartContextType = { cartItems: Product[] addToCart: (product: Product) => void removeFromCart: (productId: number) => void updateQuantity: (productId: number, quantity: number) => void clearCart: () => void totalItems: number subtotal: number } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: React.ReactNode }) { const [cartItems, setCartItems] = useState([]) // Load cart from localStorage on client side useEffect(() => { const savedCart = localStorage.getItem("cart") if (savedCart) { try { setCartItems(JSON.parse(savedCart)) } catch (error) { console.error("Failed to parse cart from localStorage:", error) } } }, []) // Save cart to localStorage whenever it changes useEffect(() => { if (cartItems.length > 0) { localStorage.setItem("cart", JSON.stringify(cartItems)) } }, [cartItems]) const addToCart = (product: Product) => { setCartItems((prevItems) => { const existingItem = prevItems.find((item) => item.id === product.id) if (existingItem) { return prevItems.map((item) => item.id === product.id ? { ...item, quantity: (item.quantity || 1) + 1 } : item, ) } else { return [...prevItems, { ...product, quantity: 1 }] } }) } const removeFromCart = (productId: number) => { setCartItems((prevItems) => prevItems.filter((item) => item.id !== productId)) // If cart is empty after removal, clear localStorage if (cartItems.length === 1) { localStorage.removeItem("cart") } } const updateQuantity = (productId: number, quantity: number) => { if (quantity < 1) return setCartItems((prevItems) => prevItems.map((item) => (item.id === productId ? { ...item, quantity } : item))) } const clearCart = () => { setCartItems([]) localStorage.removeItem("cart") } const totalItems = cartItems.reduce((total, item) => total + (item.quantity || 1), 0) const subtotal = cartItems.reduce((total, item) => total + item.price * (item.quantity || 1), 0) return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (context === undefined) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescriptreact:file="app/products/page.tsx" isMerged="true" import { ProductGrid } from "@/components/product-grid" const products = [ { id: 1, name: "Classic White T-Shirt", price: 29.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: true, }, { id: 2, name: "Slim Fit Jeans", price: 59.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: false, }, { id: 3, name: "Summer Floral Dress", price: 79.99, image: "/placeholder.svg?height=400&width=300", category: "women", isNew: true, }, { id: 4, name: "Casual Hoodie", price: 49.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: false, }, { id: 5, name: "Denim Jacket", price: 89.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: true, }, { id: 6, name: "Pleated Skirt", price: 45.99, image: "/placeholder.svg?height=400&width=300", category: "women", isNew: false, }, { id: 7, name: "Knit Sweater", price: 65.99, image: "/placeholder.svg?height=400&width=300", category: "women", isNew: true, }, { id: 8, name: "Cargo Pants", price: 55.99, image: "/placeholder.svg?height=400&width=300", category: "men", isNew: false, }, ] export default function ProductsPage() { return (

All Products

Browse our complete collection of premium clothing

) } [V0_FILE]typescriptreact:file="components/product-grid.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ShoppingCart } from "lucide-react" import { useCart } from "@/components/cart-provider" type Product = { id: number name: string price: number image: string category: string isNew: boolean } export function ProductGrid({ products }: { products: Product[] }) { return (

{products.map((product) => ( ))}

) } function ProductCard({ product }: { product: Product }) { const { addToCart } = useCart() return (

{product.isNew && New}

{product.name}

${product.price.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/products/[id]/page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { ChevronRight, Minus, Plus, ShoppingCart } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useCart } from "@/components/cart-provider" // Mock product data - in a real app, you would fetch this from an API const products = [ { id: 1, name: "Classic White T-Shirt", price: 29.99, image: "/placeholder.svg?height=600&width=600", category: "men", isNew: true, description: "A timeless classic white t-shirt made from 100% organic cotton. Features a comfortable fit and durable construction that will last through countless washes.", details: { material: "100% Organic Cotton", fit: "Regular", care: "Machine wash cold, tumble dry low", origin: "Ethically made in Portugal", }, sizes: ["XS", "S", "M", "L", "XL"], colors: ["White", "Black", "Gray"], images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], }, { id: 2, name: "Slim Fit Jeans", price: 59.99, image: "/placeholder.svg?height=600&width=600", category: "men", isNew: false, description: "Modern slim fit jeans with a slight stretch for comfort. Features a classic five-pocket design and a versatile mid-wash that pairs well with anything.", details: { material: "98% Cotton, 2% Elastane", fit: "Slim", care: "Machine wash cold, inside out", origin: "Made in Turkey", }, sizes: ["28", "30", "32", "34", "36"], colors: ["Blue", "Black", "Gray"], images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], }, { id: 3, name: "Summer Floral Dress", price: 79.99, image: "/placeholder.svg?height=600&width=600", category: "women", isNew: true, description: "A lightweight floral dress perfect for summer days. Features a flattering silhouette with a flowy skirt and adjustable straps.", details: { material: "100% Viscose", fit: "Regular", care: "Hand wash cold, line dry", origin: "Made in India", }, sizes: ["XS", "S", "M", "L", "XL"], colors: ["Floral Print", "Blue", "White"], images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], }, { id: 4, name: "Casual Hoodie", price: 49.99, image: "/placeholder.svg?height=600&width=600", category: "men", isNew: false, description: "A comfortable casual hoodie perfect for everyday wear. Features a soft fleece lining and a relaxed fit for maximum comfort.", details: { material: "80% Cotton, 20% Polyester", fit: "Relaxed", care: "Machine wash cold, tumble dry low", origin: "Made in Vietnam", }, sizes: ["S", "M", "L", "XL", "XXL"], colors: ["Gray", "Black", "Navy"], images: [ "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", "/placeholder.svg?height=600&width=600", ], }, ] export default function ProductPage({ params }: { params: { id: string } }) { const productId = Number.parseInt(params.id) const product = products.find((p) => p.id === productId) const [quantity, setQuantity] = useState(1) const [selectedSize, setSelectedSize] = useState("") const [selectedColor, setSelectedColor] = useState("") const [selectedImage, setSelectedImage] = useState(0) const { addToCart } = useCart() if (!product) { return (

Product not found

The product you are looking for does not exist.

) } const handleAddToCart = () => { if (!selectedSize || !selectedColor) return addToCart({ ...product, quantity, selectedSize, selectedColor, }) } return (

Home Products {product.name}

{product.isNew && New}

{product.images.map((image, index) => ( ))}

{product.name}

${product.price.toFixed(2)}

{product.description}

Size

{product.sizes.map((size) => ( ))}

{!selectedSize &&

Please select a size

}

Color

{product.colors.map((color) => ( ))}

{!selectedColor &&

Please select a color

}

Quantity

{quantity}

Details Shipping & Returns

Material

{product.details.material}

Fit

{product.details.fit}

Care

{product.details.care}

Origin

{product.details.origin}

Shipping

Free standard shipping on all orders over $100. Delivery within 3-5 business days.

Returns

We accept returns within 30 days of delivery. Items must be unworn, unwashed, and with the original tags attached.

) } [V0_FILE]typescriptreact:file="app/cart/page.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Minus, Plus, ShoppingBag, Trash } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { useCart } from "@/components/cart-provider" export default function CartPage() { const { cartItems, removeFromCart, updateQuantity, subtotal, clearCart } = useCart() if (cartItems.length === 0) { return (

Your cart is empty

Looks like you haven't added anything to your cart yet.

) } return (

Shopping Cart

{cartItems.map((item) => (

{item.name}

{item.selectedSize && `Size: ${item.selectedSize}`} {item.selectedColor && `, Color: ${item.selectedColor}`}

${item.price.toFixed(2)}

{item.quantity || 1}

))}

Order Summary

Subtotal ${subtotal.toFixed(2)}

Shipping Calculated at checkout

Tax Calculated at checkout

Total ${subtotal.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import Link from "next/link" import { ChevronLeft, CreditCard, ShieldCheck } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useCart } from "@/components/cart-provider" export default function CheckoutPage() { const { cartItems, subtotal, clearCart } = useCart() const [isSubmitting, setIsSubmitting] = useState(false) const [isComplete, setIsComplete] = useState(false) if (cartItems.length === 0 && !isComplete) { return (

Your cart is empty

You need to add items to your cart before checking out.

) } if (isComplete) { return (

Order Confirmed!

Thank you for your purchase. Your order has been confirmed and will be shipped soon.

Order #12345

A confirmation email has been sent to your email address.

) } const handleSubmit = (e) => { e.preventDefault() setIsSubmitting(true) // Simulate payment processing setTimeout(() => { setIsSubmitting(false) setIsComplete(true) clearCart() }, 2000) } return (

Checkout

Contact Information

First Name

Last Name

Phone

Shipping Address

Address

Apartment, suite, etc. (optional)

City

State

ZIP Code

Payment Method

Credit Card PayPal Cash on Delivery

Name on Card

Card Number

Expiry Date

CVC

You will be redirected to PayPal to complete your purchase securely.

Cash on Delivery

Pay with cash when your order is delivered to your doorstep. A small COD fee may apply.

Secure and convenient

No need to share payment details online

Pay only when you receive

Inspect your items before payment

Shipping Method

Standard Shipping Free

Delivery in 5-7 business days

Express Shipping $9.99

Delivery in 2-3 business days

) } function OrderSummary({ cartItems, subtotal }) { return ( Order Summary

{cartItems.map((item) => (

{item.quantity || 1} × {item.name}

${(item.price * (item.quantity || 1)).toFixed(2)}

))}

Subtotal ${subtotal.toFixed(2)}

Shipping Free

Tax Calculated at checkout

Total ${subtotal.toFixed(2)}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This